<template>
    <p>{{ user.name }}</p>
    <button @click="change">修改user.name</button>
    <hr>

    <p>{{ count }}</p>
    <button @click="modify">修改count</button>
    <hr>

    <p>{{ user.age }}</p>
    <p>{{ ageRef }}</p>
    <button @click="ageRef++">修改ageRef</button>

    <hr>
    <p>{{ name }}</p>
    <button @click="name='mike'">修改name</button>
    <hr>

    <p>{{ doubleCount }}</p>

</template>

<script setup>
import { computed, reactive, ref, toRef, toRefs } from 'vue'
import { watch } from 'vue'


/**
 * reactive用法
 */
// 普通对象，不具有响应式
// const user = {
//     name: 'tom',
//     age: 20
// }

// 创建一个响应式对象，代理对象
const user = reactive({
    name: 'tom',
    age: 20
})

const change = function() {
    user.name = 'jerry'
    console.log(user.name)

    // console.log(this) // undefined
}

/**
 * ref用法
 */
var count = ref(1) // {value: 1}

const modify = function() {
    count.value++
    console.log(count.value)
}


/**
 * toRef用法
 */
// var x = user.age
const ageRef = toRef(user, 'age')


/**
 * toRefs用法
 */
const userRef = toRefs(user)
console.log(userRef)
var {name, age} = userRef


/**
 * computed用法
 */
const doubleCount = computed(() => count.value * 2)


/**
 * watch用法
 */
watch(count, (newValue, oldValue) => {
    console.log(newValue)
})
</script>

<style scoped>

</style>